<template>
  <div class="data-sharing-service p-4">
    <!-- 数据服务统计 -->
    <div class="service-stats mb-6">
      <h2 class="text-xl font-medium mb-4">数据服务统计</h2>
      <div class="stats-content bg-white p-4 rounded-lg shadow-md">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="stats-card text-center">
              <div class="text-3xl font-bold text-primary mb-2">
                <ArtRingChart
                  :percentage="33.11"
                  :color="['#67C23A', '#E6A23C', '#F56C6C']"
                  :data="[
                    { name: '已用', value: 50 },
                    { name: '剩余', value: 101 }
                  ]"
                />
              </div>
              <div class="text-lg">数据服务连接数</div>
              <div class="text-gray-500 text-sm">
                当前数据库连接数: 50个
                <br />
                最大连接数: 151个
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stats-card text-center">
              <div class="text-3xl font-bold text-success mb-2">
                <ArtRingChart
                  :percentage="82.32"
                  :color="['#67C23A', '#E6A23C', '#F56C6C']"
                  :data="[
                    { name: '已用', value: 1686 },
                    { name: '剩余', value: 362 }
                  ]"
                />
              </div>
              <div class="text-lg">数据库表空间(主数据)</div>
              <div class="text-gray-500 text-sm">
                已使用空间: 1686M
                <br />
                表空间总量: 2048M
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stats-card text-center">
              <div class="text-3xl font-bold text-warning mb-2">
                <ArtRingChart
                  :percentage="73.86"
                  :color="['#67C23A', '#E6A23C', '#F56C6C']"
                  :data="[
                    { name: '已用', value: 16286 },
                    { name: '剩余', value: 5762 }
                  ]"
                />
              </div>
              <div class="text-lg">数据库表空间(数据集成库)</div>
              <div class="text-gray-500 text-sm">
                已使用空间: 16286M
                <br />
                表空间总量: 22048M
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 服务使用提醒 -->
    <div class="service-usage-alert mb-6">
      <h2 class="text-xl font-medium mb-4">服务使用提醒</h2>
      <div class="alert-content bg-white p-4 rounded-lg shadow-md">
        <el-table :data="serviceUsageList" border stripe>
          <el-table-column prop="serviceName" label="服务名" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="asyncTaskStatus" label="异步任务状态">
            <template #default="scope">
              <el-tag :type="scope.row.asyncTaskStatus === '不支持异步任务' ? 'info' : 'success'">
                {{ scope.row.asyncTaskStatus }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 数据调用统计 -->
    <div class="data-usage-stats mb-6">
      <h2 class="text-xl font-medium mb-4">数据调用统计</h2>
      <div class="stats-content bg-white p-4 rounded-lg shadow-md">
        <div class="mb-4">
          <h3 class="text-lg mb-2">学生数据子类</h3>
          <ArtBarChart
            :data="[2, 1, 1, 1]"
            :xAxisData="['教务', '校公文服务', 'Test01', '校公文服务未授权目录参数']"
            :color="['#FF9900', '#67C23A', '#409EFF', '#E6A23C']"
          />
        </div>
        <el-table :data="dataUsageList" border stripe>
          <el-table-column prop="serviceName" label="服务名" />
          <el-table-column prop="system" label="调用系统" />
          <el-table-column prop="count" label="调用次数" />
          <el-table-column prop="time" label="调用时间" />
        </el-table>
      </div>
    </div>

    <!-- 服务安全提醒 -->
    <div class="service-security-alert">
      <h2 class="text-xl font-medium mb-4">服务安全提醒</h2>
      <div class="alert-content bg-white p-4 rounded-lg shadow-md">
        <el-alert
          v-for="alert in securityAlerts"
          :key="alert.id"
          :title="alert.title"
          :type="alert.type"
          :description="alert.description"
          show-icon
          class="mb-2"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 服务使用列表
const serviceUsageList = ref([
  {
    serviceName: '教师子类',
    status: '启用',
    asyncTaskStatus: '不支持异步任务'
  },
  {
    serviceName: '学生数据子类',
    status: '启用',
    asyncTaskStatus: '不支持异步任务'
  },
  {
    serviceName: '班级数据子类表',
    status: '启用',
    asyncTaskStatus: '不支持异步任务'
  },
  {
    serviceName: '院系变更子类表',
    status: '启用',
    asyncTaskStatus: '不支持异步任务'
  },
  {
    serviceName: '数据清洗',
    status: '启用',
    asyncTaskStatus: '不支持异步任务'
  }
])

// 数据调用统计列表
const dataUsageList = ref([
  {
    serviceName: '学生数据子类',
    system: '教务',
    count: 2,
    time: '2023-05-24 14:29:16'
  },
  {
    serviceName: '校公文服务',
    system: '校公文',
    count: 1,
    time: '2019-11-15 11:32:20'
  },
  {
    serviceName: 'Test01',
    system: '测试',
    count: 1,
    time: '2019-11-27 09:12:53'
  },
  {
    serviceName: '校公文服务未授权目录参数',
    system: '校公文',
    count: 1,
    time: '2019-11-15 11:37:22'
  }
])

// 安全提醒
const securityAlerts = ref([
  {
    id: 1,
    title: '服务访问异常',
    type: 'warning',
    description: '检测到部分服务访问频率异常，请注意检查'
  },
  {
    id: 2,
    title: '数据库空间预警',
    type: 'warning',
    description: '主数据库空间使用率超过80%，请及时处理'
  }
])
</script>

<style scoped lang="scss">
.data-sharing-service {
  .stats-card {
    height: 100%;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 